<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Checkout</title>
<!-- Custom Theme files -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- //Custom Theme files -->
<link href="/front/css/bootstrap.css" type="text/css" rel="stylesheet" media="all">
<link href="/front/css/style.css" type="text/css" rel="stylesheet" media="all">
<link href="/front/css/jquery-confirm.css" type="text/css" rel="stylesheet" media="all">
<!-- js -->
<script src="/front/js/jquery.min.js"></script>
<script type="text/javascript" src="/front/js/bootstrap-3.1.1.min.js"></script>
<script type="text/javascript" src="/front/js/jquery-confirm.js"></script>
<!-- //js -->
<!-- cart -->
<script src="/front/js/simpleCart.min.js"> </script>
<!-- cart -->
<style type="text/css">
	.rf{
		float:right
	}
	.rf span{
		font-size: 25px;
		color: #F07818;
		text-align: center;
	}
	form input[type="submit"] {
	    border: 2px solid #F07818;
	    color: #FFF;
	    font-size: 1.1em;
	    padding: 0.5em 2em;
	    transition: 0.5s all;
	    -webkit-transition: 0.5s all;
	    -moz-transition: 0.5s all;
	    -o-transition: 0.5s all;
	    display: inline-block;
	    outline: none;
	    background-color: #F07818;
	}
</style>
<script> 
	$(function(){ 
	setTotal();
	$(".add").click(function(){ 
		var t=$(this).parent().find('input[class*=text_box]');
		var inventory=$(this).parent().find('input[name*=inventory]').val();
		if(parseInt(t.val())>=inventory){ 
			 t.val(parseInt(inventory)-1); 
		} 
		t.val(parseInt(t.val())+1);
		setSoleTotal(this);
		var cartId=$(this).parent().find('input[name*=cartId]').val();
		
		
		  $.ajax({
			url:'/cart/update',//请求地址
          	type:'post',//请求类型
          	data:{
          		"cartId":cartId,
          		"quantity":t.val()
          	},//传入后台数据
          	dataType:'text',//后台返回数据类型
          	success : function(data) {
　　　　　　　　　	
 　　　　　 	},
          	error:function(data){
            　　	alert("服务器异常！");
          }
		})  
		
		
	}) 	
	$(".min").click(function(){ 
		var t=$(this).parent().find('input[class*=text_box]'); 
		t.val(parseInt(t.val())-1) 
		if(parseInt(t.val())<1){ 
		t.val(1); 
		} 
		var cartId=$(this).parent().find('input[name*=cartId]').val();
		 $.ajax({
			url:'/cart/update',//请求地址
          	type:'post',//请求类型
          	data:{
          		"cartId":cartId,
          		"quantity":t.val()
          	},//传入后台数据
          	dataType:'text',//后台返回数据类型
          	success : function(data) {
　　　　　　　　　	
 　　　　　 	},
          	error:function(data){
            　　	alert("服务器异常！");
          }
		})  
		setSoleTotal(this);
	})
	function setSoleTotal(e){
		a=$(e).parent().find('input[class*=text_box]').val();
		b=$(e).parent().prev().find('span[class*=price]').text();
		s= a*b;
		console.log(s.toFixed(1));
		var t = $(e).parents().children(".delivery").children().find('span[class*=total]');
		t.html(s.toFixed(1));
		setTotal();
		
	}	
	
	function setTotal(){
		var total = 0;
		  $(".total").each(function() {
		 	 total+=parseInt(($(this).text())); 
		 })
		 total=total.toFixed(1);
		 console.log(total);
		 $("#all").html(total);
		}
		
		$('.close1').on('click', function(){
				var cartId=$(this).parent().find('input[name*=cartId]').val();
				var a = $(this).parents('.cart-header');
				$.confirm({
				    title: '确认删除?',
				    content: '确认从该购物车中删除该商品吗?',
				    confirm: function(c){
				    a.fadeOut('slow', function(c){
							a.remove();
							setTotal();
							});
					    $.ajax({
						url:'/cart/delete',//请求地址
			          	type:'post',//请求类型
			          	data:{
			          		"cartId":cartId,
			          	},//传入后台数据
			          	dataType:'text',//后台返回数据类型
			          	success : function(data) {
			　　　　　　　　　	
			 　　　　　 	},
			          	error:function(data){
			            　　	alert("服务器异常！");
			          }
					})  
				       $.alert('已删除!');
				       /* location.reload(); */
				    },
				    cancel: function(){
				        $.alert('已取消!')
				    }
						});
					});	
		
	}) 
</script> 

</head>
<body>
	<!--header-->
	<div class="header">
		<div class="container">
			<nav class="navbar navbar-default" role="navigation">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
						<span class="sr-only">Toggle navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<h1 class="navbar-brand"><a  href="index">Yummy</a></h1>
				</div>
				<!--navbar-header-->
				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">
						<li><a href="index" class="active">Home</a></li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">Birthday<b class="caret"></b></a>
							<ul class="dropdown-menu multi-column columns-4">
								<div class="row">
									<div class="col-sm-3">
										<h4>By Relation</h4>
										<ul class="multi-column-dropdown">
											<li><a class="list" href="products">Friend</a></li>
											<li><a class="list" href="products">Lover</a></li>
											<li><a class="list" href="products">Sister</a></li>
											<li><a class="list" href="products">Brother</a></li>
											<li><a class="list" href="products">Kids</a></li>
											<li><a class="list" href="products">Parents</a></li>
										</ul>
									</div>																		
									<div class="col-sm-3">
										<h4>By Flavour</h4>
										<ul class="multi-column-dropdown">
											<li><a class="list" href="products">Chocolate</a></li>
											<li><a class="list" href="products">Mixed Fruit</a></li>
											<li><a class="list" href="products">Butterscotch</a></li>
											<li><a class="list" href="products">Strawberry</a></li>
											<li><a class="list" href="products">Vanilla</a></li>
											<li><a class="list" href="products">Eggless Cakes</a></li>
										</ul>
									</div>
									<div class="col-sm-3">
										<h4>By Theme</h4>
										<ul class="multi-column-dropdown">
											<li><a class="list" href="products">Heart shaped</a></li>
											<li><a class="list" href="products">Cartoon Cakes</a></li>
											<li><a class="list" href="products">2-3 Tier Cakes</a></li>
											<li><a class="list" href="products">Square shape</a></li>
											<li><a class="list" href="products">Round shape</a></li>
											<li><a class="list" href="products">Photo cakes</a></li>
										</ul>
									</div>
									<div class="col-sm-3">
										<h4>Weight</h4>
										<ul class="multi-column-dropdown">
											<li><a class="list" href="products">1 kG</a></li>
											<li><a class="list" href="products">1.5 kG</a></li>
											<li><a class="list" href="products">2 kG</a></li>
											<li><a class="list" href="products">3 kG</a></li>
											<li><a class="list" href="products">4 kG</a></li>
											<li><a class="list" href="products">Large</a></li>
										</ul>
									</div>
								</div>
							</ul>
						</li>
					   <li class="dropdown grid">
							<a href="#" class="dropdown-toggle list1" data-toggle="dropdown">Wedding<b class="caret"></b></a>
							<ul class="dropdown-menu multi-column columns-4">
								<div class="row">
									<div class="col-sm-3">
										<h4>By Relation</h4>
										<ul class="multi-column-dropdown">
											<li><a class="list" href="products">Friend</a></li>
											<li><a class="list" href="products">Lover</a></li>
											<li><a class="list" href="products">Sister</a></li>
											<li><a class="list" href="products">Brother</a></li>
											<li><a class="list" href="products">Kids</a></li>
											<li><a class="list" href="products">Parents</a></li>
										</ul>
									</div>																		
									<div class="col-sm-3">
										<h4>By Flavour</h4>
										<ul class="multi-column-dropdown">
											<li><a class="list" href="products">Chocolate</a></li>
											<li><a class="list" href="products">Mixed Fruit</a></li>
											<li><a class="list" href="products">Butterscotch</a></li>
											<li><a class="list" href="products">Strawberry</a></li>
											<li><a class="list" href="products">Vanilla</a></li>
											<li><a class="list" href="products">Eggless Cakes</a></li>
										</ul>
									</div>
									<div class="col-sm-3">
										<h4>By Theme</h4>
										<ul class="multi-column-dropdown">
											<li><a class="list" href="products">Heart shaped</a></li>
											<li><a class="list" href="products">Cartoon Cakes</a></li>
											<li><a class="list" href="products">2-3 Tier Cakes</a></li>
											<li><a class="list" href="products">Square shape</a></li>
											<li><a class="list" href="products">Round shape</a></li>
											<li><a class="list" href="products">Photo cakes</a></li>
										</ul>
									</div>
									<div class="col-sm-3">
										<h4>Weight</h4>
										<ul class="multi-column-dropdown">
											<li><a class="list" href="products">1 kG</a></li>
											<li><a class="list" href="products">1.5 kG</a></li>
											<li><a class="list" href="products">2 kG</a></li>
											<li><a class="list" href="products">3 kG</a></li>
											<li><a class="list" href="products">4 kG</a></li>
											<li><a class="list" href="products">Large</a></li>
										</ul>
									</div>
								</div>
							</ul>
						</li>				
						<li class="dropdown grid">
							<a href="#" class="dropdown-toggle list1" data-toggle="dropdown">Special Offers <b class="caret"></b></a>
							<ul class="dropdown-menu multi-column columns-4">
								<div class="row">
									<div class="col-sm-3">
										<h4>By Relation</h4>
										<ul class="multi-column-dropdown">
											<li><a class="list" href="products">Friend</a></li>
											<li><a class="list" href="products">Lover</a></li>
											<li><a class="list" href="products">Sister</a></li>
											<li><a class="list" href="products">Brother</a></li>
											<li><a class="list" href="products">Kids</a></li>
											<li><a class="list" href="products">Parents</a></li>
										</ul>
									</div>																		
									<div class="col-sm-3">
										<h4>By Flavour</h4>
										<ul class="multi-column-dropdown">
											<li><a class="list" href="products">Chocolate</a></li>
											<li><a class="list" href="products">Mixed Fruit</a></li>
											<li><a class="list" href="products">Butterscotch</a></li>
											<li><a class="list" href="products">Strawberry</a></li>
											<li><a class="list" href="products">Vanilla</a></li>
											<li><a class="list" href="products">Eggless Cakes</a></li>
										</ul>
									</div>
									<div class="col-sm-3">
										<h4>By Theme</h4>
										<ul class="multi-column-dropdown">
											<li><a class="list" href="products">Heart shaped</a></li>
											<li><a class="list" href="products">Cartoon Cakes</a></li>
											<li><a class="list" href="products">2-3 Tier Cakes</a></li>
											<li><a class="list" href="products">Square shape</a></li>
											<li><a class="list" href="products">Round shape</a></li>
											<li><a class="list" href="products">Photo cakes</a></li>
										</ul>
									</div>
									<div class="col-sm-3">
										<h4>Weight</h4>
										<ul class="multi-column-dropdown">
											<li><a class="list" href="products">1 kG</a></li>
											<li><a class="list" href="products">1.5 kG</a></li>
											<li><a class="list" href="products">2 kG</a></li>
											<li><a class="list" href="products">3 kG</a></li>
											<li><a class="list" href="products">4 kG</a></li>
											<li><a class="list" href="products">Large</a></li>
										</ul>
									</div>
								</div>
							</ul>
						</li>
						<li class="dropdown grid">
							<a href="#" class="dropdown-toggle list1" data-toggle="dropdown">Store<b class="caret"></b></a>
							<ul class="dropdown-menu multi-column columns-3">
								<div class="row">
									<div class="col-sm-4">
										<h4>By Relation</h4>
										<ul class="multi-column-dropdown">
											<li><a class="list" href="products">Friend</a></li>
											<li><a class="list" href="products">Lover</a></li>
											<li><a class="list" href="products">Sister</a></li>
											<li><a class="list" href="products">Brother</a></li>
											<li><a class="list" href="products">Kids</a></li>
											<li><a class="list" href="products">Parents</a></li>
										</ul>
									</div>																		
									<div class="col-sm-4">
										<h4>By Flavour</h4>
										<ul class="multi-column-dropdown">
											<li><a class="list" href="products">Chocolate</a></li>
											<li><a class="list" href="products">Mixed Fruit</a></li>
											<li><a class="list" href="products">Butterscotch</a></li>
											<li><a class="list" href="products">Strawberry</a></li>
											<li><a class="list" href="products">Vanilla</a></li>
											<li><a class="list" href="products">Eggless Cakes</a></li>
										</ul>
									</div>								
									<div class="col-sm-4">
										<h4>Specials</h4>
										<ul class="multi-column-dropdown">
											<li><a class="list" href="products">Ice cream cake</a></li>
											<li><a class="list" href="products">Swiss roll</a></li>
											<li><a class="list" href="products">Ruske kape</a></li>
											<li><a class="list" href="products">Cupcakes</a></li>
											<li><a class="list" href="products">Muffin</a></li>
											<li><a class="list" href="products">Merveilleux</a></li>										
										</ul>
									</div>
								</div>
							</ul>
						</li>								
					</ul> 
					<!--/.navbar-collapse-->
				</div>
				<!--//navbar-header-->
			</nav>
			<div class="header-info">
				<div class="header-right search-box">
					<a href="#"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></a>				
					<div class="search">
						<form class="navbar-form">
							<input type="text" class="form-control">
							<button type="submit" class="btn btn-default" aria-label="Left Align">
								Search
							</button>
						</form>
					</div>	
				</div>
				<div class="header-right login">
					<a href="#"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></a>
					<div id="loginBox">                
						<form id="loginForm">
							<fieldset id="body">
								<fieldset>
									<label for="email">Email Address</label>
									<input type="text" name="email" id="email">
								</fieldset>
								<fieldset>
									<label for="password">Password</label>
									<input type="password" name="password" id="password">
								</fieldset>
								<input type="submit" id="login" value="Sign in">
								<label for="checkbox"><input type="checkbox" id="checkbox"> <i>Remember me</i></label>
							</fieldset>
							<p>New User ? <a class="sign" href="account">Sign Up</a> <span><a href="#">Forgot your password?</a></span></p>
						</form>
					</div>
				</div>
				<div class="header-right cart">
					<a href="#"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span></a>
					<div class="cart-box">
						<h4><a href="checkout">
							<span class="simpleCart_total"> $0.00 </span> (<span id="simpleCart_quantity" class="simpleCart_quantity"> 0 </span>) 
						</a></h4>
						<p><a href="javascript:;" class="simpleCart_empty">Empty cart</a></p>
						<div class="clearfix"> </div>
					</div>
				</div>
				<div class="clearfix"> </div>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
	<!--//header-->
	<!--cart-items-->
	<div class="cart-items">
		<div class="container">
			<h2>My Shopping Cart</h2>
			
			<script>$(document).ready(function() {
				  
				});
			</script>
			<form action="">
			
				<div class="cart-header" th:each="cart:${carts}">
					<div class="close1"> </div>
					<div class="cart-sec simpleCart_shelfItem">
						<div class="cart-item cyc">
							 <img th:src="${productImgMap[cart.product.productId]}" class="img-responsive" alt="">
						</div>
						<div class="cart-item-info">
						
							<h3><a href="#"><p th:text="${cart.product.productName}"></p></a>
							<span><p th:text="${cart.product.productDescribe}"></p></span></h3>
							<ul class="qty">
								
								<li><span>单价: </span><span th:text="${cart.product.productPrice}" class="price"></span></li>
								<li><span>数量: </span>
									<input class="min" name="" type="button" value="-" /> 
									<input class="text_box" name="" type="text"  th:value="*{cart.productQuantity}" size="2"/> 
									<input class="add" name="" type="button" value="+" />
									<input th:value="*{cart.cartId}" type="hidden" name="cartId">
									<input th:value="*{cart.product.productInventory}" type="hidden" name="inventory">
								</li>
								
								
							</ul>
							<div class="delivery">
								<p>总价 : <span th:text="*{cart.productQuantity*cart.product.productPrice}" class="total"></span></p>
								<span ><p th:text="${cart.product.productName}"></p></span>
								<div class="clearfix"></div>
							</div>	
						</div>
						<div class="clearfix"></div>
					</div>
				</div>
				
				<div class="rf">
					<span>总价:<label id="all"></label></span>
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<input type="submit" value="提交订单">
				</div>
				
				
			</form>
			
		</div>
	</div>
	<!--//checkout-->	
	<!--footer-->
	<div class="footer">
		<div class="container">
			<div class="footer-grids">
				<div class="col-md-2 footer-grid">
					<h4>company</h4>
					<ul>
						<li><a href="products">products</a></li>
						<li><a href="#">Work Here</a></li>
						<li><a href="#">Team</a></li>
						<li><a href="#">Happenings</a></li>
						<li><a href="#">Dealer Locator</a></li>
					</ul>
				</div>
				<div class="col-md-2 footer-grid">
					<h4>service</h4>
					<ul>
						<li><a href="#">Support</a></li>
						<li><a href="#">FAQ</a></li>
						<li><a href="#">Warranty</a></li>
						<li><a href="contact">Contact Us</a></li>
					</ul>
				</div>
				<div class="col-md-3 footer-grid">
					<h4>order & returns</h4>
					<ul>
						<li><a href="#">Order Status</a></li>
						<li><a href="#">Shipping Policy</a></li>
						<li><a href="#">Return Policy</a></li>
						<li><a href="#">Digital Gift Card</a></li>
					</ul>
				</div>
				<div class="col-md-2 footer-grid">
					<h4>legal</h4>
					<ul>
						<li><a href="#">Privacy</a></li>
						<li><a href="#">Terms and Conditions</a></li>
						<li><a href="#">Social Responsibility</a></li>
					</ul>
				</div>
				<div class="col-md-3 footer-grid icons">
					<h4>Connect with Us</h4>
					<ul>
						<li><a href="#"><img src="/front/images/i1.png" alt=""/>Follow us on Facebook</a></li>
						<li><a href="#"><img src="/front/images/i2.png" alt=""/>Follow us on Twitter</a></li>
						<li><a href="#"><img src="/front/images/i3.png" alt=""/>Follow us on Google-plus</a></li>
						<li><a href="#"><img src="/front/images/i4.png" alt=""/>Follow us on Pinterest</a></li>
					</div>
				</div>
				<div class="clearfix"></div>
			</div>
		</div>
	</div>
	<!--footer-->
	<div class="footer-bottom">
		<div class="container">
			<p>Copyright &copy; 2015.Company name All rights reserved.More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></p>
		</div>
	</div>
</body>
</html>